<template>
	<div id="page">

		<iframe class="kf" :src="src" ref="iframe"></iframe>

		<!-- <frameset cols="100%,*" rows="*" frameborder="NO" border="0" framespacing="0">
			<frame id="linkHtml" :src="src" />
		</frameset> -->

		<!-- <div class="logo" @click="navLeft">
			<img src="../../assets/logo3.png">
		</div> -->

	</div>
</template>

<script>
	export default {
		name: "kefu",
		data() {
			return {
				src: 'https://official.chssgy.net/chat/index?noCanClose=1&token=c6a33592e3c6700b9a07c49b6b8fd31f',
				iframeWin: {}
				// src: 'http://47.243.118.5/chat/mobile?noCanClose=1&token=0377bfcba89767007980d3d28ad18e93'
			}
		},
		mounted() {
			// console.log(this.$refs.iframe)

			// var _s = document.createElement('script');
			// _s.src = "https://official.chssgy.net/customerServer.js"
			// _s.onload = function() {
			// 	var option = {
			// 		"authInit": true,
			// 		openUrl: 'https://official.chssgy.net',
			// 		token: 'c6a33592e3c6700b9a07c49b6b8fd31f',
			// 		kefuid: '', //默认为空自动对接客服，可填写指定客服ID
			// 		isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true
			// 		mobileIcon: '../../assets/logo3.png', //  手机端悬浮客服图片
			// 		pcIcon: '', // pc端悬浮客服图片
			// 		windowStyle: 'center', //默认空 右下角小弹窗， center 普通中间弹窗样式
			// 	};
			// 	var canCustomerServer = new initCustomerServer(option);
			// 	canCustomerServer.init();
			// }
			// document.head.appendChild(_s)
		},
		mounted() {
			// 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
			window.addEventListener('message', this.handleMessage)
			this.iframeWin = this.$refs.iframe.contentWindow
		},
		methods: {
			sendMessage() {
				// 外部vue向iframe内部传数据
				this.iframeWin.postMessage({
					cmd: 'getFormJson',
					params: {}
				}, '*')
			},
		},
		handleMessage(event) {
			// 根据上面制定的结构来解析iframe内部发回来的数据
			const data = event.data
			switch (data.cmd) {
				case 'returnFormJson':
					// 业务逻辑
					break
				case 'returnHeight':
					// 业务逻辑
					break
			}
		},

		methods: {
			navLeft() {
				this.$router.push({
					name: 'My'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#page {
		background-color: #FFF;
	}

	// .main{
	// 	overflow: hidden; border: none;
	// }
	.kf {
		width: 100%;
		height: 100%;
		border: none;
	}

	.logo {
		position: absolute;
		top: 0px;
		right: 0px;
		height: 100px;
		width: 100px;

		img {
			width: 100px;
			height: 100px;
			padding: 20px;
			box-sizing: border-box;
		}
	}
</style>
